<!doctype html>
<html>

<head>
  <title>Asset Management</title>
  <meta charset="utf-8">
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
</head>

<body>
  <header class="header">
    <div class="header-top">
      <div class="containers">
        <div class="left">
          <img src="../../images/tips.png" alt="">
          <span>优品汇售后退还无忧服务上线</span>
        </div>
        <div class="right">
          <a href="./login.html">请先登录&nbsp;&nbsp;| </a>
          <a href="./register.html">&nbsp;&nbsp;免费注册&nbsp;&nbsp;|</a>
          <a href="./myorder.html">&nbsp;&nbsp;我的订单&nbsp;&nbsp;|</a>
          <a href="./helpcenter.html">&nbsp;&nbsp;帮助中心&nbsp;&nbsp;|</a>
          <a href="">&nbsp;&nbsp;在线客服&nbsp;&nbsp;|</a>
          <a href="">
            <img src="../../images/phone.png" alt="">
            <span>手机版</span>
          </a>
        </div>
      </div>
    </div>
    <div class="header-bottom">
      <div class="containers">
        <img src="../../images/logo.png" alt="" class="logo">
        <div class="name">
          <div class="name-top">净水器</div>
          <div class="name-bottom">惠聚优质商品</div>
        </div>
        <ul>
          <li>
            <span class="active">
              <a href="./index.html">首页</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./waterpurifier.html">净水器</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./directlywater.html">直饮水</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./watercheck.html">水质查询</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./applyinstall.html">申请安装</a>
            </span>
          </li>
          <li>
            <span>
              <a href="./applyfix.html">申请维修</a>
            </span>
          </li>
        </ul>
        <div style="position: relative;display: inline-block">
          <input type="text" placeholder="输入商品关键词">
          <img src="../../images/search.png" alt="" class="search-img" onclick="window.location.href='./search.html'">
        </div>
        <span class="mycar">
          <a href="./mycart.html">我的购物车</a>
        </span>
        <img src="../../images/bag.png" alt="" class="bag">
      </div>
    </div>
  </header>
  <div class="contents">
    <div class="breadCrumbs">
      <div class="containers">
        首页 > 专题 > 全部专题
      </div>
    </div>
    <div class="board containers">
      <div class="tabs">
        <span id="today" onclick="today();">今日水质</span>
        <span id="water" class="active" onclick="water();">水质查询</span>
      </div>
      <div id="water-board">
        <div class="address-group">
          <div>所在地区</div>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="true">
              请选择
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
            </ul>
          </div>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="true">
              请选择
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
            </ul>
          </div>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="true">
              请选择1
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
            </ul>
          </div>
          <div class="check">
            查看
          </div>
        </div>

        <div class="board-detail">
          <div class="city">
            当前城市：北京北京市东城区
          </div>
          <div class="value">
            <span class="tds">TDS值：
              <span class="red">255</span>
            </span>
            <span>余氯值：0.13mg/L</span>
          </div>
          <div class="tips flex y-center">
            <img src="../../images/tips2.png" alt="">
            <span>温馨提示：您查询地区的水质显示TDS比较高，建议使用家用净水器。</span>
          </div>
          <div class="btn-home">进入首页</div>
        </div>

        <div class="knowledge" class="display-none">
          <div class="title">TDS值小知识</div>
          <div class="p">溶解性总固体的缩写，只溶解在水里的无机盐和有机物的总称。其主要成分有钙镁纳钾离子和碳酸离子、氯离子、硫酸离子和硝酸离子。</div>
          <div class="p green">
            TDS值可作为水质数据的参考,但不建议为反映水质的好坏标准，根据国际饮用水标准健康饮用水TDS值标准为50。
          </div>

          <div class="compare">以下是通常几种不同水的对比：</div>
          <div class="compare-board flex green">
            <div class="left">
              <div>自来水：50-1000 </div>
              <div>反渗透纯净水：0-50 </div>
            </div>
            <div class="right">
              <div>泉水：100-300</div>
              <div>水：20000</div>
            </div>
          </div>
        </div>
      </div>

      <div id="today-board" class="display-none">
        <div class="today-item flex">
          <div class="left">
            <div class="date">
              <div class="small-date">2017</div>
              <div class="big-date">03/22</div>
            </div>
            <img src="../../images/water1.png" alt="">
            <div class="text">今日水质</div>
          </div>
          <div class="right">
            <img src="../../images/product2.png" alt="">
            <div class="text-board flex y-center space-between">
              <div class="text-left">
                <div class="bold">家用直饮纯水机</div>
                <div>【现在下单送299元净水伴侣】</div>
              </div>
              <div class="text-right red">19.9元起</div>
            </div>
          </div>
        </div>
        <div class="today-item flex">
          <div class="left">
            <div class="date">
              <div class="small-date">2017</div>
              <div class="big-date">03/22</div>
            </div>
            <img src="../../images/water1.png" alt="">
            <div class="text">今日水质</div>
          </div>
          <div class="right">
            <img src="../../images/product2.png" alt="">
            <div class="text-board flex y-center space-between">
              <div class="text-left">
                <div class="bold">家用直饮纯水机</div>
                <div>【现在下单送299元净水伴侣】</div>
              </div>
              <div class="text-right red">19.9元起</div>
            </div>
          </div>
        </div>
        <div class="today-item flex">
          <div class="left">
            <div class="date">
              <div class="small-date">2017</div>
              <div class="big-date">03/22</div>
            </div>
            <img src="../../images/water1.png" alt="">
            <div class="text">今日水质</div>
          </div>
          <div class="right">
            <img src="../../images/product2.png" alt="">
            <div class="text-board flex y-center space-between">
              <div class="text-left">
                <div class="bold">家用直饮纯水机</div>
                <div>【现在下单送299元净水伴侣】</div>
              </div>
              <div class="text-right red">19.9元起</div>
            </div>
          </div>
        </div>
        <div class="today-item flex">
          <div class="left">
            <div class="date">
              <div class="small-date">2017</div>
              <div class="big-date">03/22</div>
            </div>
            <img src="../../images/water1.png" alt="">
            <div class="text">今日水质</div>
          </div>
          <div class="right">
            <img src="../../images/product2.png" alt="">
            <div class="text-board flex y-center space-between">
              <div class="text-left">
                <div class="bold">家用直饮纯水机</div>
                <div>【现在下单送299元净水伴侣】</div>
              </div>
              <div class="text-right red">19.9元起</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="pagination flex display-none" id="pagination">
      <div class="prev">上一页</div>
      <div class="num active">1</div>
      <div class="num">2</div>
      <div class="num">3</div>
      <div class="num">4</div>
      <div class="num">5</div>
      <div class="num">6</div>
      <div class="prev">下一页</div>
    </div>
  </div>




  <footer class="footer">
    <div class="footer-top containers flex space-between">
      <div class="item">
        <div class="title text-center">客户服务</div>
        <div class="flex space-between">
          <div class="img-group">
            <img src="../../images/serve.png" alt="" class="serve-img">
            <div>在线客服</div>
          </div>
          <div class="img-group">
            <img src="../../images/question.png" alt="" class="qusetion-img">
            <div>问题反馈</div>
          </div>
        </div>
      </div>
      <div class="item">

        <div class="title text-center">关注我们</div>
        <div class="flex space-between">
          <a class="img-group">
            <img src="../../images/wechat.png" alt="" class="weixin-img">
            <div>公众号</div>
          </a>
          <a class="img-group">
            <img src="../../images/webo.png" alt="" class="weibo-img">
            <div>微博</div>
          </a>
        </div>
      </div>
      <div class="item">
        <div class="title text-center">下载APP</div>
        <div class="flex space-between">
          <img src="../../images/20170104103647314.png" alt="" class="code">
          <div class="text-group">
            <div>扫描二维码查看</div>
            <div>移动版原型效果</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title text-center">下载APP</div>
        <div class="green text-center">400-0000-000</div>

        <div class="text-center date">周一至周日：8:00-18:00</div>
        <div class="text-center">(仅收市话费)</div>

      </div>
    </div>
    <div class="footer-bottom">
      <div class="containers advantage flex y-center space-between">
        <div class="item flex y-center">
          <img src="../../images/change.png" alt="">
          <span>30天无忧退换货</span>
        </div>
        <div class="item flex y-center">
          <img src="../../images/car.png" alt="">
          <span>满88元免邮费</span>
        </div>
        <div class="item flex y-center">
          <img src="../../images/save.png" alt="">
          <span>优品汇品质保证</span>
        </div>
      </div>

      <div class="link containers text-center">
        <a href="">&nbsp;&nbsp;关于我们&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;帮助中心&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;售后服务&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;配送与验收&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;商务合作&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;企业采购&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;开放平台&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;搜索推荐&nbsp;&nbsp;|</a>
        <a href="">&nbsp;&nbsp;友情链接&nbsp;&nbsp;</a>
      </div>

      <div class="copyright text-center">
        CopyRight @ 优品汇 2015 - 2017
      </div>
    </div>
  </footer>
  <script>
    function today() {
      $('#today').addClass('active');
      $('#water').removeClass('active');
      $('#pagination').removeClass('display-none');
      $('#today-board').removeClass('display-none');
      $('#water-board').addClass('display-none');
    }
    function water() {
      $('#water').addClass('active');
      $('#today').removeClass('active');
      $('#pagination').addClass('display-none');
      $('#water-board').removeClass('display-none');
      $('#today-board').addClass('display-none');
    }
  </script>
</body>

</html>